<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <view>
          <mt-navbar :title="type === '1' ? '我发布的' : '我处理的'" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }">
          </mt-navbar>
          <view class="drop-box">
            <view class="custom-drop h-44px">
              <uv-tabs
                v-if="showTabs"
                :list="tabList"
                :current="currentTab"
                :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
                :inactive-style="{ color: '#727687' }"
                line-width="32"
                line-color="#1484EE"
                @click="tabsChange"
              ></uv-tabs>
            </view>
            <view class="flex items-center px-16rpx" style="box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(0, 0, 0, 0.15)" @click="handleOpenCategory">
              <text class="text-28rpx text-#1C213E mr-4rpx">筛选</text>
              <uv-icon name="arrow-down-fill" color="#727687" size="20rpx"></uv-icon>
            </view>
          </view>
        </view>
      </template>
      <view v-if="dataList.length" class="px-32rpx pt-16rpx">
        <view v-for="item in dataList" :key="item.id" class="list-li bg-#ffffff mb-24rpx px-32rpx py-32rpx rd-8rpx" @click="goDetail(item)">
          <view class="flex items-center justify-between pb-8rpx">
            <view class="flex-1 min-w-0 mr-10rpx">
              <text class="text-32rpx text-#1A1A1A font-bold">{{ item.productName }}</text>
            </view>
            <status-view v-if="item.clueStatus === 0" :title="type === '1' ? '待分配' : '待处理'" color="#F7775C" :current-column="1">
              <template #icon>
                <image
                  class="w-32rpx h-32rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status1.svg"
                ></image>
              </template>
            </status-view>
            <status-view v-if="item.clueStatus === 1" title="处理中" color="#1484EE" :current-column="2">
              <template #icon>
                <image
                  class="w-32rpx h-32rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status2.svg"
                ></image>
              </template>
            </status-view>
            <status-view v-if="item.clueStatus === 2" title="待返佣" color="#EFB339" :current-column="3">
              <template #icon>
                <image
                  class="w-32rpx h-32rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status3.svg"
                ></image>
              </template>
            </status-view>
            <status-view v-if="item.clueStatus === 3" title="已完成" color="#28B094" :current-column="4">
              <template #icon>
                <image
                  class="w-32rpx h-32rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status4.svg"
                ></image>
              </template>
            </status-view>
            <status-view v-if="item.clueStatus === 4" :show-column="false" title="拒绝接单" color="#ADB0BD" :current-column="4">
              <template #icon>
                <image
                  class="w-32rpx h-32rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-release-status5.svg"
                ></image>
              </template>
            </status-view>
          </view>
          <view v-if="type === '2' && item.clueStatus === 1" class="flex mt-24rpx bg-[rgba(247,119,92,0.05)] px-24rpx py-16rpx rd-8rpx">
            <image
              class="w-32rpx h-32rpx mr-16rpx mt-6rpx"
              src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clock1.svg"
            ></image>
            <view v-if="!item.isEnd" class="flex-1 min-w-0 text-28rpx text-#F7775C">
              <view>超时未处理，线索将共享给其它盟商！</view>
              <view>倒计时：<count-down :endtime="item.timeOutReallocateTime" @end="handleEndTime(item)"></count-down></view>
            </view>
            <view v-else class="flex-1 min-w-0 text-28rpx text-#F7775C">
              <view>超时未处理，线索已共享给其它盟商</view>
            </view>
          </view>
          <view class="mt-24rpx flex bg-#F5F5F5 p-16rpx">
            <view class="w-132rpx text-right text-24rpx text-#727687">所属分类：</view>
            <view class="flex-1 min-w-0 text-24rpx text-#727687 break-all">{{ item.productCategoryParentName }}</view>
          </view>
          <view class="mt-24rpx flex">
            <view class="w-150rpx text-right text-28rpx text-#727687">发布城市：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all">{{ item.city }}</view>
          </view>
          <view class="mt-24rpx flex">
            <view class="w-150rpx text-right text-28rpx text-#727687">联系人：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all">{{ item.contactsName }} {{ item.contactsPhone }}</view>
          </view>
          <view class="mt-24rpx flex line-height-28rpx">
            <view class="w-150rpx text-right text-28rpx text-#727687">创建时间：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</view>
          </view>
          <view class="text-right mt-32rpx" @click.stop>
            <mt-button
              v-if="type === '2' && [1, 2].includes(item.clueStatus)"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              @click="openFollow(item)"
              >跟进</mt-button
            >
            <mt-button
              v-if="type === '2' && [1].includes(item.clueStatus)"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              @click="goSign(item)"
              >签约</mt-button
            >
            <mt-button
              v-if="type === '2' && [2].includes(item.clueStatus)"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              @click="goRake(item)"
              >返佣</mt-button
            >
            <mt-button
              v-if="type === '1' && [1, 2, 3].includes(item.clueStatus)"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              @click="goComplaint(item)"
              >投诉</mt-button
            >
          </view>
        </view>
      </view>
    </z-paging>

    <mt-more-column-checkbox
      ref="categoryRef"
      v-model="category"
      label="productCategoryName"
      :list="categoryArr"
      @confirm="handleCategoryConfirm"
    ></mt-more-column-checkbox>
  </view>
</template>

<script setup>
import { cluegetCluePage, cluegetClueStatusCount } from '@/subClue/api/index';
import { productCategorygetProductCategoryTreeApp } from '@/api/mixed';
import statusView from '@/subClue/components/status-view.vue';
import countDown from '@/subClue/components/count-down.vue';
import dayjs from 'dayjs';

const tabList = ref([
  {
    name: '全部',
    type: null,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '待分配',
    type: 0,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '处理中',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '待返佣',
    type: 2,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '已完成',
    type: 3,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '拒绝接单',
    type: 4,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  pagingRef.value.reload();
}

const categoryRef = ref();
function handleOpenCategory() {
  categoryRef.value.open();
}

const categoryArr = ref([]);
const category = ref([]);
function handleCategoryConfirm() {
  getNum();
  pagingRef.value.reload();
}

function handleEndTime(item) {
  item.isEnd = true;
}

function goComplaint(item) {
  uni.navigateTo({
    url: `/subClue/pages/complaint?id=${item.id}`
  });
}

function openFollow(item) {
  uni.navigateTo({
    url: `/subClue/pages/followUp?id=${item.id}`
  });
}
function goSign(item) {
  uni.navigateTo({
    url: `/subClue/pages/signContract?id=${item.id}`
  });
}
function goRake(item) {
  uni.navigateTo({
    url: `/subClue/pages/rakeBack?id=${item.id}`
  });
}

function getSelect() {
  productCategorygetProductCategoryTreeApp().then((res) => {
    categoryArr.value = res.data;
  });
}

const showTabs = ref(false);
function getNum() {
  showTabs.value = false;
  cluegetClueStatusCount({
    type: type.value,
    productCategoryIds: category.value
  }).then((res) => {
    for (const item of tabList.value) {
      if (item.type === null) {
        item.badge.value = res.data[-1];
      } else {
        item.badge.value = res.data[item.type];
      }
    }
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

function goDetail(item) {
  uni.navigateTo({
    url: `/subClue/pages/detail?type=${type.value}&id=${item.id}`
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      type: type.value,
      clueStatus: tabList.value[currentTab.value].type,
      productCategoryIds: category.value
    };
    const res = await cluegetCluePage(params);
    const list = res.data.items;
    for (const item of list) {
      item.isEnd = false;
      const p_name = JSON.parse(item.productCategoryName);
      item.productCategoryParentName = p_name[0];
      item.productCategoryName = p_name[1];
    }
    lastId.value = list[list.length - 1]?.dataId;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

const type = ref('1');
onLoad((options) => {
  type.value = options.type;
  if (type.value === '2') {
    tabList.value[1].name = '待处理';
  }
  getSelect();
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});

onShow(() => {
  dataList.value = [];
  getNum();
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.drop-box {
  position: relative;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
  .custom-drop {
    flex: 1;
    min-width: 0;
  }
}
.list-li {
  .apply-btn.mt-button {
    min-width: 160rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    padding: 16rpx 24rpx;
    margin-left: 16rpx;
  }
}
</style>
